<template>
  <div>
    <div class="advertisement-info">
      <div class="content">
        <div class="project-info">
          <div class="advertisement-form mt50">
            <el-form
              style="max-width: 1200px"
              :model="state.form"
              ref="formRef"
              :rules="rules"
              label-position="top"
            >
              <el-form-item label="服务名称" prop="mingcheng">
                <el-col :span="10">
                  <el-input size="large" v-model="state.form.mingcheng" />
                </el-col>
              </el-form-item>
              <el-form-item label="服务图标(建议尺寸:80*80px)" prop="tubiao">
                <bjz-oss
                  :previewList="state.form.tubiao"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successImgIcon"
                  @remove="removeImgIcon"
                />
              </el-form-item>
              <el-form-item label="服务归属" prop="fuwuguishu">
                <el-select
                  width="240"
                  show-border
                  v-model="state.form.fuwuguishu"
                  disabled
                  size="large"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in state.position"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  >
                    {{ item.dicLabel }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="服务介绍" prop="fuwujieshao">
                <el-col :span="24">
                  <el-input
                    type="textarea"
                    rows="5"
                    size="large"
                    v-model="state.form.fuwujieshao"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="跳转类型" prop="tiaozhuanleixing">
                <el-select
                  width="240"
                  show-border
                  v-model="state.form.tiaozhuanleixing"
                  @change="select"
                  size="large"
                  placeholder="跳转类型"
                >
                  <el-option
                    v-for="item in state.type"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  >
                    {{ item.dicLabel }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="上传图片"
                prop="tupian"
                v-if="
                  state.form.tiaozhuanleixing ==
                  'fuwuguanlitiaozhuanleixing_lianjie'
                "
              >
                <bjz-oss
                  :previewList="state.form.tupian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successImg"
                  @remove="removeImg"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  state.form.tiaozhuanleixing ==
                  'fuwuguanlitiaozhuanleixing_lianjie'
                "
                label="跳转链接"
                prop="fuwuneirong"
              >
                <el-col :span="10">
                  <el-input size="large" v-model="state.form.fuwuneirong" />
                </el-col>
              </el-form-item>
              <el-form-item
                label="富文本"
                v-if="
                  state.form.tiaozhuanleixing ==
                  'fuwuguanlitiaozhuanleixing_fuwenben'
                "
                prop="fuwuneirong"
              >
                <editor
                  :initValue="state.form.fuwuneirong"
                  :index="index"
                  @onVal="onVal"
                />
              </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="state.form.shangjia">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { EditServe, GetServe } from "@/api/serve";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const validateImg = (rule, value, callback) => {
  if (state.form.tubiao && state.form.tubiao.length) {
    callback();
  } else {
    callback(new Error("请上传服务图标"));
  }
};
const validateImg1 = (rule, value, callback) => {
  if (state.form.tupian && state.form.tupian.length) {
    callback();
  } else {
    callback(new Error("请上传产品介绍（视频/图片）"));
  }
};
const rules = {
  mingcheng: [{ required: true, message: "请输入服务名称", trigger: "blur" }],
  tubiao: [{ required: true, trigger: "blur", validator: validateImg }],
  fuwuguishu: [
    { required: true, message: "请选择服务归属", trigger: "change" },
  ],
  fuwujieshao: [{ required: true, message: "请输入服务介绍", trigger: "blur" }],
  tiaozhuanleixing: [
    { required: true, message: "请选择跳转类型", trigger: "change" },
  ],
  tupian: [{ required: true, trigger: "blur", validator: validateImg1 }],
  fuwuneirong: [{ required: true, message: "请输入服务内容", trigger: "blur" }],
};
const state = reactive({
  form: {
    mingcheng: "",
    tubiao: [],
    fuwuguishu: "",
    fuwujieshao: "",
    tiaozhuanleixing: "",
    tupian: [],
    fuwuneirong: "",
    shangjia: null,
  },
  position: [],
  type: [],
});
// 富文本编辑器
const onVal = (val) => {
  state.form.fuwuneirong = val;
};
const html2text = (html) => {
  html = html.replace(/(\n)/g, "");
  html = html.replace(/(\t)/g, "");
  html = html.replace(/(\r)/g, "");
  html = html.replace(/<\/?[^>]*>/g, "");
  html = html.replace(/(\s)/g, "");
  return html;
};
const select = () => {
  state.form.fuwuneirong = html2text(state.form.fuwuneirong);
};
// 初始化数据
const init = () => {
  // 查询服务
  GetServe({ id: route.query.id }).then((res) => {
    if (res.code == 4201) {
      Object.assign(state.form, res.data);
    }
  });
  // 获取服务归属下拉
  GetDictionaryTree({ dicModel: "fuwuguishu" }).then((res) => {
    if (res.code == 4201) {
      state.position = res.data;
    }
  });
  // 获取服务跳转类型下拉
  GetDictionaryTree({ dicModel: "fuwuguanlitiaozhuanleixing" }).then((res) => {
    if (res.code == 4201) {
      state.type = res.data;
    }
  });
};
init();
// 图标上传成功
const successImgIcon = (res) => {
  state.form.tubiao.push(res);
};
// 上传图标删除
const removeImgIcon = (index) => {
  state.form.tubiao.splice(index, 1);
};
// 图片上传成功
const successImg = (res) => {
  state.form.tupian.push(res);
};
// 上传文件删除
const removeImg = (index) => {
  state.form.tupian.splice(index, 1);
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (route.query.type == "edit") {
        EditServe(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("编辑成功");
            router.go(-1);
          }
        });
      }
    }
  });
};
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  .advertisement-form {
    width: 1200px;
  }
}
.el-form-item {
  display: flex;
  flex-direction: column;
  &.vue-editor {
    align-items: baseline;
  }
  &.status {
    flex-direction: row;
  }
}
</style>
<style lang="scss">
.advertisement-form {
  textarea {
    &[name="editorValue"] {
      display: none;
    }
  }
}
.button-group {
  margin-top: 50px;
  .el-form-item__content {
    width: 100% !important;
    justify-content: center;
  }
}
</style>
